<template>
  <div class="chart-map">
    <div id="tranmap"></div>
    <div class="chart-search">
      <chart-search @changeAddr="changeAddr"/>
    </div>
  </div>
</template>
<script>
import chartSearch from './chartSearch.vue'

export default {
  data () {
    return {
      map: '',
      addr: {
        name: '度才子集团',
        city: '东莞'
      }
    }
  },
  components: {
    chartSearch
  },
  methods: {
    setPoint (title, city = '') {
      //创建地址解析器实例
      var myGeo = new BMapGL.Geocoder()
      // 将地址解析结果显示在地图上，并调整地图视野
      myGeo.getPoint(title, (point) => {
        if (point) {
          this.map.centerAndZoom(point, 16)
          this.map.addOverlay(new BMapGL.Marker(point, { title }))
        } else {
          // alert('您选择的地址没有解析到结果！');
        }
      }, city)
    },

    changeAddr (result) {
      this.setPoint(result.name, result.city)
    }
  },
  mounted () {
    // 百度地图API功能
    this.map = new BMapGL.Map('tranmap')    // 创建Map实例
    this.map.enableScrollWheelZoom(true)     //开启鼠标滚轮缩放
    this.map.setMapStyleV2({
      styleId: 'bc0dbad2dad0347f4be2ea6e323efd2f'
    })
    const addr = JSON.parse(localStorage.getItem('defaultAddr')) || this.addr
    this.setPoint(addr.name, addr.city)
  }
}
</script>
<style scoped>
.chart-map {
  width: calc(100% - 1px);
  height: 100%;
  padding: 5px;
}

#tranmap {
  width: calc(100%);
  height: 100%;
}

.chart-search {
  position: absolute;
  z-index: 99;
  bottom: 5px;
}
</style>
